<template>
    <div id="building">
        <div class="main">
            <el-card style="width: 450px;">

                <el-text style="font-size: 1.3em">注册新的账号</el-text><br>
                <el-text style="font-size: 0.5em">已经拥有账号？</el-text>
                <router-link to="/" style="font-size: 0.5em" >登录</router-link>

                <el-form ref="form" :model="form" style="margin-top: 10px"
                         label-position="top"
                >
                    <el-form-item label="账号名">
                        <el-input v-model="form.username" placeholder="邮箱/手机号/用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称">
                        <el-input v-model="form.password" placeholder="请输入密码" show-password></el-input>
                    </el-form-item>

                    <el-form-item label="密码">
                        <el-input v-model="form.password" placeholder="请输入密码" show-password></el-input>
                    </el-form-item>

                    <el-form-item label="">
                        <el-checkbox @change="agreechange" v-model="form.agree1">接受我们的条款、数据使用政策和Cookie政策。</el-checkbox>
                    </el-form-item>

                    <el-form-item label="" style="margin-top: -20px;">

                            <el-checkbox @change="agreechange" v-model="form.agree2">接受我们的短信通知，并可以随时退订。</el-checkbox>

                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" style="width: 800px" :disabled="zhuce">注册</el-button><br>
                        <el-divider></el-divider>
                        <el-button plain type="warning" style=" width: 800px">使用微博账号注册</el-button>
                    </el-form-item>
                    <el-button plain type="success" style=" width: 410px;">使用微信账号注册</el-button>
                </el-form>
            </el-card>
        </div>

    </div>
</template>

<script>
export default {
    name: "myEnroll",
    data() {
        return {
            zhuce:true,
            form: {
                username: '',
                password:'',
                remember:'',
                agree1:false,
                agree2:false,

            }
        }
    },
    methods: {
        onSubmit() {
            alert('submit!');
        },
        agreechange(){
            if (this.form.agree1&&this.form.agree2){
                this.zhuce=false
            }else {
                this.zhuce=true
            }
        }
    },

}
</script>

<style scoped>
.main{
    text-align: center; /*让div内部文字居中*/
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    margin: auto;
    position: absolute;
    top: -200px;
    left: -25px;
    right: 0;
    bottom: 0;
}
#building{
    background:url("../img/login.jpg");
    width:100%;
    height:100%;
    position:fixed;
    background-size:100% 100%;
}
</style>
